<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智憬AI</title>
    <style>
      body {
        overflow: hidden;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      }
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .tips {
        margin-top: 20px;
        color: #ff4d4f;
        font-size: 12px;
        text-align: center;
        height: 20px;
        transition: all 0.3s ease;
        opacity: 0;
      }
      .tips.show {
        opacity: 1;
      }
      .page-container {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      .page-container-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
      }
      .page-main {
        margin-top: -100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 20px;
      }
      .page-title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
        font-size: 24px;
        color: #333;
        font-weight: 500;
      }
      .page-btns {
        display: flex;
        gap: 20px;
        align-items: center;
      }

      .open-btn,
      .download-btn {
        padding: 12px 32px;
        font-size: 16px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      .open-btn:hover,
      .download-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
      }
      .open-btn:active,
      .download-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .download-btn {
        background-color: #4caf50;
      }

      /* 现代化提示框样式 */
      .toast-notification {
        position: fixed;
        top: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(-50px);
        background: white;
        color: #333;
        padding: 16px 24px;
        border-radius: 12px;
        z-index: 999;
        opacity: 0;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        max-width: 90%;
        width: auto;
        min-width: 280px;
      }
      .toast-notification.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      .toast-notification.hide {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px);
      }
      .toast-notification::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        border-radius: 12px 0 0 12px;
        background: #4caf50;
      }
      .toast-notification.error {
        background: #fff1f0;
        color: #ff4d4f;
      }
      .toast-notification.error::before {
        background: #ff4d4f;
      }
      .toast-content {
        flex: 1;
        font-size: 15px;
        line-height: 1.4;
      }
      .progress-bar {
        position: absolute;
        bottom: 0;
        left: 4px;
        height: 3px;
        width: 0;
        background: rgba(76, 175, 80, 0.3);
        border-radius: 0 0 0 12px;
        animation: progress 3s linear forwards;
      }
      .toast-notification.error .progress-bar {
        background: rgba(255, 77, 79, 0.3);
      }
      @keyframes progress {
        to {
          width: calc(100% - 4px);
        }
      }

      /* 隐藏的下载链接 */
      .hidden-download {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="page-container">
      <img src="./images/open-bg.png" class="page-container-bg">
      <div class="page-main">
        <h3 class="page-title">欢迎使用智憬AI</h3>

        <div class="page-btns">
          <button class="open-btn" onclick="openApp()">打开APP</button>
          <button class="download-btn" onclick="downloadApp()">下载APP</button>
        </div>

        <div id="statusTips" class="tips"></div>
      </div>
    </div>

    <!-- 现代化提示框 -->
    <div id="toast" class="toast-notification">
      <div class="toast-content" id="toast-content"></div>
      <div class="progress-bar" id="progress-bar"></div>
    </div>

    <!-- 隐藏的下载链接 -->
    <a id="downloadLink" class="hidden-download" href="./apk/智憬AI.apk" download="智憬AI.apk"></a>

    <script>
      // let token = '${token}';
      let token = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImxvZ2luX3RlbmFudF9pZCI6MSwibG9naW5fdXNlcl9rZXkiOiIwNDVhMDM3Yi1lYzQ5LTQzNTktYjUwMS0yNGFkMGY4OTk0NTkifQ.hXm6cV-m8fB9M-WzVmMOFqHlbB0keilOK9atFA94i24TvOsYr1bhpn8FkDfHUu9_TfuACXNZRv_ftaZy9YXb5g';

      if (token === '-1') {
        showToast('获取token失败，请检查配置或联系管理员。', 3000, false, true);
      }else{
        setTimeout(() => {
          openApp()
        }, 200);
      }

      // 统一配置URL Scheme（需与UniApp中配置的协议一致）
      const APP_SCHEME = `zhijingaiapp://pages/chatList/index?token=${token}&isDebug=isDebug`;

      // 显示现代化提示框
      function showToast(message, duration = 3000, showProgress = false, isError = false) {
        const toast = document.getElementById('toast');
        const content = document.getElementById('toast-content');
        const progressBar = document.getElementById('progress-bar');
        
        // 设置错误样式
        if(isError) {
          toast.classList.add('error');
        } else {
          toast.classList.remove('error');
        }
        
        // 控制进度条显示
        progressBar.style.display = showProgress ? 'block' : 'none';
        if(showProgress) {
          // 重置进度条动画
          progressBar.style.animation = 'none';
          void progressBar.offsetWidth; // 触发重绘
          progressBar.style.animation = 'progress ' + (duration/1000) + 's linear forwards';
        }
        
        content.textContent = message;
        toast.classList.remove('hide');
        toast.classList.add('show');
        
        setTimeout(() => {
          toast.classList.remove('show');
          toast.classList.add('hide');
        }, duration);
      }

      // 显示按钮下方的错误提示
      function showErrorTip(message, duration = 3000) {
        const tip = document.getElementById('statusTips');
        tip.innerHTML = message;
        tip.classList.add('show');
        
        setTimeout(() => {
          tip.classList.remove('show');
        }, duration);
      }

      // 下载APP函数
      function downloadApp() {
        showToast('正在准备下载...');
        
        // 模拟下载延迟
        setTimeout(() => {
          const downloadLink = document.getElementById('downloadLink');
          
          // 检查链接是否存在
          if(downloadLink) {
            // 触发下载
            downloadLink.click();
            showToast('下载已开始，请稍候...', 3000, true);
          } else {
            showToast('下载链接不存在', 3000, false, true);
            showErrorTip('无法找到下载文件，请联系管理员');
          }
        }, 500);
      }

      function openApp() {
        const startTime = new Date().getTime();
        let appLaunched = false;

        // 监听页面失去焦点（判断是否成功唤起）
        window.addEventListener('blur', () => {
          appLaunched = true;
        });

        // 尝试通过URL Scheme打开APP
        const triggerAppLaunch = () => {
          showToast('正在打开APP...', 3000, true);
          
          // 优先使用iframe方案（兼容国产浏览器）
          const iframe = document.createElement('iframe');
          iframe.style.display = 'none';
          iframe.src = APP_SCHEME;
          document.body.appendChild(iframe);
          
          // 备用方案：直接跳转
          setTimeout(() => {
            document.body.removeChild(iframe);
            if(!appLaunched) {
              window.location.href = APP_SCHEME;
            }
          }, 300);
        };

        // 执行唤起
        triggerAppLaunch();

        // 检测APP是否成功唤起
        const checkAppOpen = () => {
          if(appLaunched) return;
          
          if(new Date().getTime() - startTime > 2000) {
            showErrorTip('若未能打开APP，请检查是否已安装 <br/> 若已安装，请手动点击打开APP的按钮 <br/> 若无任何弹窗，请检查浏览器是否拦截了打开APP的弹窗',60000);
          } else {
            setTimeout(checkAppOpen, 100);
          }
        };

        checkAppOpen();
      }

      
    </script>
  </body>
</html>